<template>
  <div id="printFileList">
    <div class="print-content" v-for="(item, index) in printList" :key="index">
      <p class="title">卷内目录</p>
      <p class="page">
        <span>共</span>
        <span>{{ list.length }}</span>
        <span>页</span><span>第</span>
        <span>{{ index + 1 }}</span>
        <span>页</span>
      </p>
      <table class="custom-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>文件号</th>
            <th>档案编码</th>
            <th>责任者</th>
            <th>文件题名</th>
            <th>日期</th>
            <th>页数</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in item" :key="index">
            <td>{{ JSON.stringify(row) !== '{}' ? index + 1 : '' }}</td>
            <td>{{ row.code }}</td>
            <td>{{ row.filesBoxCode }}</td>
            <td>{{ row.chargeUserName }}</td>
            <td>{{ row.name }}</td>
            <td>{{ row.createdTime?.split(' ')[0] }}</td>
            <td>{{ row.filePages }}</td>
            <td>{{ row.summary }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, onMounted } from 'vue';

const props = defineProps({
  list: {
    type: Array
  }
});
const printList = computed(() => {
  return props.list.map((item: any) => {
    if (!Array.isArray(item)) return [];
    // 固定一个表格10行
    if (item.length == 0) {
      item.length = 10;
      item.fill({});
    } else if (item.length < 10) {
      for (let i = item.length; i < 10; i++) {
        item.push({});
      }
    }
    return item;
  });
});
</script>
<style lang="less" scoped></style>
